﻿@page "/history"
@namespace SwashbucklerDiary.Pages
@inherits DiariesPageComponentBase

<MyAppBar>
    @if (NormalCalendarVisible)
    {
        <MToolbarTitle Class="font-weight-bold">
            @(I18n.T("History.Calendar"))
        </MToolbarTitle>
    }
    else
    {
        <div class="float-calendar" style="cursor:pointer;" @onclick="()=>ShowFloatCalendar=true">
            <MTextField Value="PickedDate"
                        Class="rounded-lg text-h6 font-weight-bold"
                        Dense="true"
                        Readonly="true"
                        Solo="true"
                        Flat="true"
                        HideDetails="@("auto")"
                        PrependIcon="mdi-calendar">
            </MTextField>
        </div>
    }

    <MSpacer></MSpacer>

    <MButton Icon="true"
             OnClick="ExportThisTime">
        <MIcon>
            mdi-export
        </MIcon>
    </MButton>

    <MButton Icon="true"
             OnClick="()=>ShowDiarySort=true">
        <MIcon>
            mdi-sort-variant
        </MIcon>
    </MButton>
</MyAppBar>

<ScrollContainer @ref="ScrollContainer">
    <IntersectElement IntersectChanged="HandleIntersectChanged">
        <MDatePicker @bind-Value="PickedDate"
                     Class="rounded-lg my-picker mb-5 pt-4"
                     TValue="DateOnly"
                     ShowCurrent="false"
                     FullWidth="true"
                     NoTitle="true"
                     Color="primary"
                     Events="EventsDates"
                     EventColor='"primary"'
                     Locale="@(I18n.Culture.Name)">
        </MDatePicker>
    </IntersectElement>

    <DiaryCardList @bind-Tags="Tags"
                   @bind-ShowSort="ShowDiarySort"
                   Value="PickedDiaries"
                   OnRemove="HandelOnRemove">
    </DiaryCardList>
</ScrollContainer>

<MyDatePicker @bind-Value="ShowFloatCalendar"
              @bind-Date="PickedDate"
              Events="EventsDates"
              EventColor='"primary"'>
</MyDatePicker>

<ExportThisTimeDialog @bind-Value="ShowExportThisTime"
                      PickedDate="PickedDate">
</ExportThisTimeDialog>
